// 全局动画样式
// 淡入淡出效果
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

// 缩放效果
@keyframes scaleIn {
  from {
    transform: scale(0.95);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes scaleOut {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(0.95);
    opacity: 0;
  }
}

// 滑动效果
@keyframes slideInRight {
  from {
    transform: translateX(20px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInLeft {
  from {
    transform: translateX(-20px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideInDown {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

// 脉冲效果
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

// 呼吸效果
@keyframes breathe {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
  }
}

// 悬停效果
@keyframes hoverLift {
  0% {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  100% {
    transform: translateY(-4px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  }
}

// 旋转效果
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

// 闪烁效果
@keyframes blink {
  0%, 50%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0.5;
  }
}

// 波浪效果 (用于进度条或其他元素)
@keyframes wave {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100% 0;
  }
}

// 组合动画 - 缩放+滑动
@keyframes scaleSlideIn {
  from {
    transform: scale(0.95) translateY(20px);
    opacity: 0;
  }
  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

// 组合动画 - 旋转+缩放
@keyframes rotateScaleIn {
  from {
    transform: rotate(-5deg) scale(0.9);
    opacity: 0;
  }
  to {
    transform: rotate(0) scale(1);
    opacity: 1;
  }
}

// 组合动画 - 弹跳进入
@keyframes bounceIn {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  50% {
    transform: scale(1.05);
    opacity: 1;
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

// 抖动效果
@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-5px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(5px);
  }
}

// 定义动画类
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

.scale-enter-active, .scale-leave-active {
  transition: all 0.3s ease;
}

.scale-enter-from, .scale-leave-to {
  transform: scale(0.95);
  opacity: 0;
}

.slide-right-enter-active, .slide-right-leave-active {
  transition: all 0.3s ease;
}

.slide-right-enter-from, .slide-right-leave-to {
  transform: translateX(20px);
  opacity: 0;
}

.slide-left-enter-active, .slide-left-leave-active {
  transition: all 0.3s ease;
}

.slide-left-enter-from, .slide-left-leave-to {
  transform: translateX(-20px);
  opacity: 0;
}

.slide-up-enter-active, .slide-up-leave-active {
  transition: all 0.3s ease;
}

.slide-up-enter-from, .slide-up-leave-to {
  transform: translateY(20px);
  opacity: 0;
}

.slide-down-enter-active, .slide-down-leave-active {
  transition: all 0.3s ease;
}

.slide-down-enter-from, .slide-down-leave-to {
  transform: translateY(-20px);
  opacity: 0;
}

// 应用动画的工具类
// 命名保持一致，使用驼峰命名
.animate-fadeIn {
  animation: fadeIn 0.5s ease forwards;
}

.animate-fadeOut {
  animation: fadeOut 0.5s ease forwards;
}

.animate-scaleIn {
  animation: scaleIn 0.3s ease forwards;
}

.animate-scaleOut {
  animation: scaleOut 0.3s ease forwards;
}

.animate-slideInRight {
  animation: slideInRight 0.3s ease forwards;
}

.animate-slideInLeft {
  animation: slideInLeft 0.3s ease forwards;
}

.animate-slideInUp {
  animation: slideInUp 0.3s ease forwards;
}

.animate-slideInDown {
  animation: slideInDown 0.3s ease forwards;
}

.animate-pulse {
  animation: pulse 2s infinite;
}

.animate-breathe {
  animation: breathe 2s infinite;
}

.animate-spin {
  animation: spin 1s linear infinite;
}

.animate-blink {
  animation: blink 1.5s infinite;
}

.animate-hover-lift:hover {
  animation: hoverLift 0.3s forwards;
}

// 组合动画类
.animate-scaleSlideIn {
  animation: scaleSlideIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.animate-rotateScaleIn {
  animation: rotateScaleIn 0.6s ease forwards;
}

.animate-bounceIn {
  animation: bounceIn 0.7s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}

.animate-shake {
  animation: shake 0.6s ease forwards;
}

// 波浪进度条背景
.wave-bg {
  background: linear-gradient(90deg, rgba(64, 158, 255, 0.2) 0%, rgba(64, 158, 255, 0.6) 50%, rgba(64, 158, 255, 0.2) 100%);
  background-size: 200% 100%;
  animation: wave 2s linear infinite;
}

// 加载动画
.loading-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(64, 158, 255, 0.3);
  border-radius: 50%;
  border-top-color: #409eff;
  animation: spin 1s ease-in-out infinite;
}

// 骨架屏动画
.skeleton-loading {
  position: relative;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.05);
}

.skeleton-loading::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 0.2) 20%,
    rgba(255, 255, 255, 0.5) 60%,
    rgba(255, 255, 255, 0)
  );
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}

// 元素进入视口时的淡入动画（通过Intersection Observer使用）
.fade-in-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}